<template>
  <div>
    <KunkkaTableTransfer
      ref="KunkkaTableTransfer"
      :table-data="tableData"    
      :left-props="leftProps"
      :right-props="rightProps"
      filter-field="name"
      @dispatchData="getArr"
    />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: Array.from({ length: 500 }, (_, idx) => ({
          id: idx,
          date: '2021-01-01',
          name: 'name' + idx
        })),
        leftProps: [
          { label: 'id', prop: 'id' },
          { label: 'date', prop: 'date' },
          { label: 'name', prop: 'name' }
        ],
        rightProps: [
          { label: 'id', prop: 'id' },
          { label: 'date', prop: 'date' },
          { label: 'name', prop: 'name' },
          { label: 'dep', prop: 'dep' }
        ]
      }
    },
    mounted() {
      var arr = Array.from({ length: 5 }, (_, idx) => ({
        id: idx,
        date: '2021-01-01',
        name: 'name' + idx
      }))
      arr.push({
        id: 666,
        date: '2020-02-02',
        name: 'nb'
      })
      arr.push({
        id: 777,
        date: '2020-02-02',
        name: '777'
      })
      this.$refs.KunkkaTableTransfer.setPickArray(arr)
    },
    methods: {
      getArr(arr) {
        console.log(arr)
      }
    }
  }

</script>
<style lang="scss">

</style>
